---
title: "Sparklines - Area Customisation"
enterprise: true
---

This section shows how Area Sparklines can be customised by overriding the default area options.

The following can be used to customise Area Sparklines:

* [Area Line Options](./sparklines-area-customisation/#area-line-options)
* [Marker Options](./sparklines-area-customisation/#marker-options)
* [Area Fill Options](./sparklines-area-customisation/#area-fill-options)
* [Axis Line Options](./sparklines-area-customisation/#axis-line-options)
* [Sparkline Padding Options](./sparklines-area-customisation/#sparkline-padding-options)

Also see [Additional Customisations](./sparklines-area-customisation/#additional-customisations) for more advanced
customisations that are common across all sparklines.

The snippet below shows option overrides for the Area Sparkline:

```js
sparklineOptions: {
    type: 'area',
    fill: 'rgba(216, 204, 235, 0.3)',
    stroke: 'rgb(119,77,185)',
    marker: {
        enabled: true,
        size: 0,
        itemStyler: (params: any) => {
            if (params.highlighted) {
                return {
                    size: 7
                };
            }
        }
    },
    highlight: {
        highlightedItem: {
            fill: 'rgb(143,185,77)',
            strokeWidth: 0,
        },
    },
    axis: {
        type: 'category',
        stroke: 'rgb(204, 204, 235)'
    }
}
```

The following example demonstrates the results of the Area Sparkline options above:

{% gridExampleRunner title="Area Sparkline Customisation" name="area-sparkline-customisation"  exampleHeight=585 /%}

## Area Line Options

To apply custom `stroke` and `strokeWidth` attributes to the line, set these properties under `line` options as shown:

```js
sparklineOptions: {
    type: 'area',
    // Customise the area line path in the area sparkline.
    stroke: 'orange',
    strokeWidth: 2
}
```

The result of the above configuration is displayed here.

{% flex justifyContent="center" %}
{% imageCaption imagePath="resources/default.png" alt="Line default" constrained=true width="250px" enableDarkModeFilter=true %}
Default
{% /imageCaption %}
{% imageCaption imagePath="resources/custom-line.png" alt="Line customisation" constrained=true width="250px" enableDarkModeFilter=true %}
Custom line
{% /imageCaption %}
{% /flex %}

## Marker Options

The markers are enabled by default but the size has been set to `0`px, making them invisible.

The `size` property in the `marker.itemStyler` is `10`px, allowing the markers to become visible when in the highlighted state.

These formats can be modified to your liking by setting the `marker.itemStyler` and `highlight` options as demonstrated below.

```js
sparklineOptions: {
    type: 'area',
    marker: {
        enabled: true,
        size: 3,
        shape: 'circle', // Optional - marker shape is 'circle' by default.
        fill: 'green',
        stroke: 'green',
        strokeWidth: 2,
        itemStyler: (params) => {
            if(params.highlighted) {
                return {
                    size: 10
                }
            }
        }
    },
    highlight: {
        highlightedItem: {
            fill: 'cyan',
            stroke: 'cyan',
        }
    },
}
```

* In the snippet above, we have configured the marker size to be `3`px in the un-highlighted normal state, and `10`px in the highlighted state.
* Note that the fill and stroke are also different depending on the highlighted state of the marker.

Here is the result of the configuration shown in the above snippet.

{% flex justifyContent="center" %}
{% imageCaption imagePath="resources/default.png" alt="Marker default" constrained=true width="250px" enableDarkModeFilter=true %}
Default
{% /imageCaption %}
{% imageCaption imagePath="resources/custom-marker.png" alt="Marker customisation" constrained=true width="250px" enableDarkModeFilter=true %}
Custom marker
{% /imageCaption %}
{% imageCaption imagePath="resources/custom-highlighted-marker.png" alt="Marker customisation for highlighted state" constrained=true width="250px" enableDarkModeFilter=true %}
Custom highlighted marker
{% /imageCaption %}
{% /flex %}

See AG Charts [Series Markers](https://www.ag-grid.com/charts/javascript/markers/) for more information on marker options.
See AG Charts [Stylers](https://www.ag-grid.com/charts/javascript/stylers/) for more information on item stylers.

## Area Fill Options

To change the color of the area between the data points and the axis line, add the `fill` property to `sparklineOptions` as shown in the code snippet below.

```js
sparklineOptions: {
    type: 'area',
    fill: 'lavender', // sets the colour between the area line and axis
}
```

Here is the result of the configuration shown in the above snippet:

{% flex justifyContent="center" %}
{% imageCaption imagePath="resources/default.png" alt="Area fill default" constrained=true width="250px" enableDarkModeFilter=true %}
Default
{% /imageCaption %}
{% imageCaption imagePath="resources/custom-fill.png" alt="Area fill customisation" constrained=true width="250px" enableDarkModeFilter=true %}
Custom fill
{% /imageCaption %}
{% /flex %}

The given `fill` string can be in one of the following formats:

* `#rgb` - Short Hex Code
* `#rrggbb` - Hex Code
* `rgb(r, g, b)` - RGB
* `rgba(r, g, b, a)` - RGB with an alpha channel
* CSS color keyword - such as `aqua`, `orange`, etc.

## Axis Line Options

By default, an axis line is displayed. This setting can be modified using the `axis` options.

See the code snippet below showing how to customise the axis line color and thickness.

```js
sparklineOptions: {
    type: 'area',
    axis: {
        stroke: 'coral', // sets the axis line stroke
        strokeWidth: 3, // sets the axis line strokeWidth
    }
}
```

Here is the result of the configuration shown in the above snippet:

{% flex justifyContent="center" %}
{% imageCaption imagePath="resources/default.png" alt="Axis line default" constrained=true width="250px" enableDarkModeFilter=true %}
Default axis line
{% /imageCaption %}
{% imageCaption imagePath="resources/custom-axis.png" alt="Axis line customisation" constrained=true width="250px" enableDarkModeFilter=true %}
Custom axis line
{% /imageCaption %}
{% /flex %}

{% note %}
It is possible to remove the axis line entirely by setting the axis `strokeWidth` to `0`.
{% /note %}

## Sparkline Padding Options

To add extra space around the sparklines, custom `padding` options can be applied as shown in the code snippet below.

```js
sparklineOptions: {
    type: 'area',
    // sets the padding around the sparkline
    padding: {
        top: 10,
        right: 5,
        bottom: 10,
        left: 5
    },
}
```

Note that the `top`, `right`, `bottom` and `left` properties are all optional and can be modified independently.

Here is the result of the configuration shown in the above snippet:

{% flex justifyContent="center" %}
{% imageCaption imagePath="resources/default-padding.png" alt="Padding default" constrained=true width="250px" enableDarkModeFilter=true %}
Default padding
{% /imageCaption %}
{% imageCaption imagePath="resources/custom-padding.png" alt="Padding customisation" constrained=true width="250px" enableDarkModeFilter=true %}
Custom padding
{% /imageCaption %}
{% /flex %}

## Additional Customisations

More advanced customisations are discussed separately in the following sections:

* [Axis](./sparklines-axis-types/) - configure the axis type via `axis` options.
* [Tooltips](./sparklines-tooltips/) - configure tooltips using `tooltip` options.
* [Points of Interest](./sparklines-points-of-interest/) - configure individual points of interest using a `itemStyler`.

## Next Up

Continue to the next section to learn about: [Bar Customisation](./sparklines-bar-customisation/).
